import React, { useContext, useRef, useEffect } from "react";
import CacheContext from "./CacheContext";
import * as cacheTypes from "./cache-types";
function withKeepAlive(
  OldComponent,
  { cacheId = window.location.pathname, scroll = true }
) {
  return function (props) {
    const { mount, cacheStates, dispatch, handleScroll } =
      useContext(CacheContext);
    const ref = useRef(null);
    useEffect(() => {
      if (scroll) {
        // scroll = true, 监听缓存组件的滚动事件，调用handleScroll()缓存滚动条
        ref.current.addEventListener(
          "scroll",
          (e) => handleScroll(cacheId, e),
          true
        );
      }
    }, [handleScroll]);
    useEffect(() => {
      let cacheState = cacheStates[cacheId];
      if (
        cacheState &&
        cacheState.doms &&
        cacheState.status !== cacheTypes.DESTROY
      ) {
        // 如果真实dom已经存在，且状态不是DESTROY，则用当前的真实dom
        let doms = cacheState.doms;
        const scrolls = cacheState.scrolls;

        doms.forEach((dom) => ref.current.appendChild(dom));
        if (scroll) {
          // 如果scroll = true, 则将缓存中的scrollTop拿出来赋值给当前dom
          scrolls.forEach((value, key) => {
            key.scrollTop = value;
          });
        }
      } else {
        // 如果还没产生真实dom，派发生成
        mount({
          cacheId,
          element: <OldComponent {...props} dispatch={dispatch} />,
        });
      }
    }, [cacheStates, dispatch, mount, props]);
    return <div id={`keepalive_${cacheId}`} ref={ref} />;
  };
}
export default withKeepAlive;
